<template>
  <div class="">
    <el-card>
      <!-- 男女比例 -->
      <div class="ged">
        <div>男女占比</div>
        <div>
          <div id="myChart" :style="{ width: '500px', height: '500px' }"></div>
        </div>
      </div>
      <!-- 客户分布图 -->
      <div>
          <div>客户分布</div>
          <div>
               <div :style="{ height: '600px', width: '900px' }" ref="myEchart"></div>
          </div>
      </div>
        <!--  -->
    </el-card>
  </div>
</template>
<script>
import echarts from "echarts";
import "echarts/map/js/china.js";

export default {
  name: "echarts",
  props: ["userJson"],
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chinaConfigure();
    this.drawLine();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    //   地图
    chinaConfigure() {
      console.log(this.userJson);
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      window.onresize = myChart.resize;
      myChart.setOption({
        // 进行相关配置
        backgroundColor: "#fff",
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: ["orangered", "yellow", "lightskyblue"],
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: "rgba(0,0,0,0.4)",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 对应上方配置
          },
          {
            name: "启动次数", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "北京",
                value: 599,
              },
              {
                name: "上海",
                value: 142,
              },
              {
                name: "黑龙江",
                value: 44,
              },
              {
                name: "深圳",
                value: 92,
              },
              {
                name: "湖北",
                value: 810,
              },
              {
                name: "四川",
                value: 453,
              },
            ],
          },
        ],
      });
    },
    // 饼状图
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "" },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "男女占比",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "男" },
              { value: 735, name: "女" },
              { value: 500, name: "未知" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>